<template>
  <div class="app-main-container">
    <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clear">
      <template v-if="meta.indexOf('EscortOrderExp') > -1" #btns>
        <el-button type="primary" :loading="exportLoading" @click="exportExcel">{{ $t('message.daochu') }}</el-button>
      </template>
    </QueryForm>
    <el-table ref="table" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit :header-row-class-name="'table-header'" class="doumee-element-table doumee-element-tableb">
      <el-table-column align="center" :label="$t('message.ddbh')" prop="orderId" min-width="220" show-overflow-tooltip>
        <template v-slot="scope">
          <span class="ckxqBtn" @click="handleDetail(scope.row.orderId)">{{ scope.row.orderId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.memberInfo')" prop="memberInfo" min-width="140" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.bykmc')" prop="escortName" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.glcp')" prop="objName" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.ddze')" prop="price" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.hyzkj')" prop="memberPrice" show-overflow-tooltip min-width="120" />
      <el-table-column align="center" :label="$t('message.ddly')" prop="channelName" show-overflow-tooltip min-width="120" />
      <el-table-column align="center" :label="$t('message.zffs')" prop="payMethodName" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.bz')" prop="remark" min-width="160" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.czsj')" prop="createTime" min-width="160" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.czr')" prop="creatorName" min-width="120" show-overflow-tooltip />

      <el-table-column :label="$t('message.zfzt')" prop="payStatusName" min-width="100" align="center" fixed="right" />
      <el-table-column :label="$t('message.caozuo')" :width="$i18n.locale === 'ZH'? 160 : 250" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button v-if="scope.row.payStatus === '0' && meta.indexOf('EscortOrderCan') > -1" v-preventReClick type="text" @click="deleteOrder(scope.row)">{{ $t('message.qxdd') }} </el-button>
            <el-button v-if="scope.row.payStatus === '0' && meta.indexOf('EscortOrderPay') > -1" v-preventReClick type="text" @click="jxzfBtn(scope.row)">{{ $t('message.jxzf') }}</el-button>
            <el-button v-if="scope.row.payStatus === '3' && meta.indexOf('EscortOrderRef') > -1" v-preventReClick type="text" @click="tkBtn(scope.row)">{{ $t('message.tk') }}</el-button>
            <el-button v-if="(scope.row.payStatus == 3 || scope.row.payStatus == 5) && meta.indexOf('EscortOrderPrin') > -1" v-preventReClick type="text" @click="print(scope.row)">{{ $t('message.dyxp') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" :page="pagination.page" @current-change="getList" @SizeChange="handleSizeChange" />
    <OrderDetail ref="OrderDetail" />
    <BykTem v-if="isPrint" ref="BykTemRef" />
    <orderDialog ref="child" @orderSuccess="getList()" />
  </div>
</template>

<script>
import store from '@/store'
import { escortOrderList, escortObjList, configList, escortOrderExport, escortOrderCancel, printOrder, escortOrderRefund } from '@/api'
import { parseTime } from '@/utils/index'
import Pagination from '@/components/paginations'
import QueryForm from '@/components/QueryForm'
import { queryFormConfig } from './components/config'
import OrderDetail from './components/orderDetail.vue'
import orderDialog from '@/components/order'
import BykTem from '@/components/printTem/banyouka.vue'
export default {
  name: 'EscortOrderList',
  components: {
    QueryForm,
    Pagination,
    orderDialog,
    OrderDetail,
    BykTem
  },
  data () {
    return {
      modalDialog: store.getters.dialog,
      meta: [],
      queryFormConfig,
      isPrint: false,
      list: [],
      subloading: false,
      listLoading: true,
      exportLoading: false,
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      filters: {}
    }
  },
  created () {
    this.meta = this.$route.meta.buttons || []
    this.getConfigList()
    this.getPzList()
    this.getList(1)
  },
  activated () {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    getPzList () {
      escortObjList({
        param: {
          venueId: sessionStorage.getItem('venueId'), queryType: '1'
        }
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.queryFormConfig.formItems[2].options = res.recordList || []
        })
        .catch(() => { })
    },
    getConfigList () {
      configList({ param: { type: '2', code: '1' } })
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.payTypes = res.recordList
          const arr = res.recordList
          this.queryFormConfig.formItems[4].options = arr
        })
        .catch(() => { })
    },
    handleDetail (id) {
      this.$refs.OrderDetail.getOrderDetail(id)
    },
    handleSizeChange (value) {
      this.pagination.rows = value
      this.getList(1)
    },
    deleteOrder (row) {
      // 取消该订单
      this.$confirm(this.$t('message.qxddtc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      })
        .then(() => {
          escortOrderCancel({
            param: {
              orderId: row.orderId
            }
          })
            .then((res) => {
              if (res.errorCode === '000000') {
                this.$message.success(this.$t('message.qxcg'))
                this.getList()
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => { })
    },
    tkBtn (row) {
      // 退款
      this.$confirm(this.$t('message.qrtktc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      })
        .then(() => {
          escortOrderRefund({
            param: {
              orderId: row.orderId,
              type: '1'
            }
          })
            .then((res) => {
              if (res.errorCode === '000000') {
                this.$message.success(this.$t('message.tktcqr'))
                this.getList()
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => { })
    },
    jxzfBtn (row) {
      this.$refs.child.continuePay(row.orderId, 'escort')
    },
    exportExcel () {
      this.exportLoading = true
      const { filters } = this
      escortOrderExport({
        param: { ...filters }
      })
        .then((res) => {
          this.exportLoading = false
          if (res.errorCode === '000000') {
            if (window.Android) {
              Android.downloadFile(res.record.showUrl);
              return
            }
            window.open(res.record.showUrl, '_blank')
          }
        })
        .catch(() => { this.exportLoading = false })
    },
    print (row) {
      this.$confirm(this.$t('message.dyxptc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      })
        .then(() => {
          this.isPrint = true
          if (window.Android) {
            Android.print('ESCORT_ORDER', row.orderId, '');
            return
          }
          printOrder({
            param: {
              contentMap: {},
              venueId: sessionStorage.getItem('venueId'),
              workId: row.orderId,
              templateCode: 'ESCORT_ORDER'
            }
          })
            .then((res) => {
              if (res.record && res.record.isPrint === '1' && res.record.dataList && res.record.dataList.length > 0) {
                res.record.dataList.forEach(item => {
                  this.$refs.BykTemRef.obj = { ...item }
                  setTimeout(() => {
                    this.$refs.BykTemRef.print()
                  }, 300)
                  setTimeout(() => {
                    this.isPrint = false
                  }, 500)
                })
              } else {
                this.isPrint = false
              }
            })
            .catch((err) => {
              this.isPrint = false
              console.log(err)
            })
        })
        .catch(() => { })
    },
    // 获取列表
    getList (page) {
      const { pagination, filters } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        this.pagination.page = page
        pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      if (filters.time && filters.time.length > 0) {
        filters.startTime = filters.time[0]
        filters.endTime = filters.time[1]
      } else {
        filters.startTime = ''
        filters.endTime = ''
      }
      this.listLoading = true
      escortOrderList({ pagination, param: { venueId, ...filters } })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
          this.$refs.table.doLayout()
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    // 清空
    clear () {
      this.filters = {}
      this.getList(1)
    }
  }
}
</script>

